<div class="container-fluid">
    <h4 class="content-head">项目列表</h4>
    <div class="table-wrapper users-table section">
        <div class="input-group" id="search">
            <label for="title">项目名称:</label>
            <input type="text" name="title" class="input-small">
            <label for="state">状态：</label>
            <select id="state" name="state">
                <option value="1">启用</option>
                <option value="0">未启用</option>
            </select>
            <label for="remark">学部：</label>
            <select name="dep">
                <option value="">请选择</option>
                <option th:each="dep :${deps}" th:value="${dep.value}" th:text="${dep.value}"></option>
            </select>
           <span class="btn_area">
               <button id="search_btn" type="button" class="btn btn-purple btn-sm">
                   搜索
                   <i class="icon-search icon-on-right bigger-110"/>
               </button>
          </span>
        </div>
        <div id="list"></div>
    </div>
</div>

<div class="container-fluid" style="display: none" id="addDiv">
    <div id="pad-wrapper" class="form-page">
        <div class="row-fluid form-wrapper">
            <div class="span12 column">
                <form id="formBusi">
                    <input type="hidden" ng-model="id">
                    <div class="field-box">
                        <label for="title">项目名称:</label>
                        <input class="span8" type="text" name="title" id="title"/>
                    </div>
                    <div class="field-box">
                        <label for="sdate">开始时间:</label>
                        <input type="datetime" value="" class="span8 datetime-picker" name="sdate" id="sdate"/>
                    </div>
                    <div class="field-box">
                        <label for="edate">结束时间:</label>
                        <input type="datetime" value="" class="span8 datetime-picker" name="edate" id="edate"/>
                    </div>
                    <div class="field-box">
                        <label for="remark">学部:</label>
                        <select name="remark" id="remark" class="jian-cell">
                            <option value="">请选择</option>
                            <option th:each="dep :${deps}" th:value="${dep.value}" th:text="${dep.value}"></option>
                        </select>
                    </div>
                    <div class="field-box">
                        <label for="orderNo">排序:</label>
                        <input type="number" name="orderNo" id="orderNo" class="span8 input-small"/>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    (function () {
        var url = 'busi/list-data';
        var $datagrid = $('#list');

        loadData();

        $('#search_btn').on('click', function () {
            loadData();
        });

        function loadData() {
            $datagrid.datagrid({
                checkbox: true,
                'dataModel': {
                    'url': url,
                    'parameters': getCommJsonParams('search')
                },
                'toolbar': [{
                    type: 'ADD',
                    click: function () {
                        addBusi();
                    }
                }, {
                    type: 'MOD',
                    click: function () {
                        var datas = $datagrid.selectedRowDatas();
                        if (datas && datas.length == 1) {
                            doUpdate(datas[0].id);
                        } else {
                            layer.msg('请选择一条数据', {icon: 5})
                        }
                    }
                }],
                'columns': [
                    {title: '项目名称', dataField: 'title'},
                     {title: '学部', dataField: 'dep'},
                    {title: '开始日期', dataField: 'sdate'},
                    {title: '结束日期', dataField: 'edate'},
                    {title: '排序', dataField: 'orderNo'},
                    {title: '状态', dataField: 'stateDict'},
                    {title: '创建日期', dataField: 'createTime'}
                ]
            });
        };

        function addBusi() {
            layer.open({
                type: 1,
                title: '新增业务',
                shadeClose: true,
                area: ['400px', '410px'],
                shade: false,
                btn: ['提交'],
                btnAlign: 'c',
                yes: function (layId) {
                    var param = $('#formBusi').serialize();
                    $.post("busi/add", param, function (result) {
                        if (result.success) {
                            loadData();
                            layer.msg("新增成功", {icon: 1});
                            layer.close(layId);
                        } else {
                            layer.msg(result.message, {icon: 1});
                        }
                    }, 'json');
                },
                maxmin: false, //开启最大化最小化按钮
                area: ['auto', 'auto'],
                content: $('#addDiv')
            });
        }

        $('.date-picker').datepicker({
            language: 'zh-CN',
            autoclose: true,
            format: 'yyyy-mm-dd'
        }).next().on(ace.click_event, function () {
            $(this).prev().focus();
        });

        function doUpdate(id) {
            var $div = $('#main-content');
            $div.load('busi/form?id=' + id, function (response, status, xhr) {
                  if (status != 'success') {
                    switch (xhr.status) {
                        case 403:
                            layer.msg("对不起，您无此访问权限！", {icon: 5});
                            break;
                        case 404:
                            layer.msg("对不起，无此页面！", {icon: 5});
                            break;
                        case 500:
                            layer.msg("内部错误，请联系管理员！", {icon: 5});
                            break;
                        case 504:
                            layer.msg("超时，请联系管理员！", {icon: 5});
                            break;
                    }
                }
            });
        }

        $('.datetime-picker').datetimepicker({
            language: 'zh-CN',
            autoclose: true,
            format: 'yyyy-mm-dd hh:ii:ss'
        }).next().on(ace.click_event, function () {
            $(this).prev().focus();
        });

    })();
</script>
